<template>
	<view class="mineBox Column" :style=" 'margin-top:' + height + 'px;'">
		<view class="bgImg">
			<image class="photoSize" src="../../static/bj.gif" mode="aspectFill"></image>
		</view>

		<!-- 已登录状态 -->
		<header class="header Row" v-if="userInfo">
			<view class="icon">
				<image class="photoSize" :src="userInfo.avatar" mode="aspectFill"></image>
			</view>

			<view class="nickname Column">
				<view class="flex-row items-center">
					<view class="name">{{userInfo.username}}</view>
					<view class="levelImg flex-row">
						<!-- <image class="imgs" src="/static/level.png" mode="aspectFill"></image> -->
						<view class="number">{{group_name}}</view>
					</view>
				</view>

				<navigator class="editUserInfo" url="/pages/mine/editInfomation/editInfomation" hover-class="none">
					查看并编辑个人资料</navigator>
			</view>

			<navigator class="settings" url="/pages/mine/settings/settings" hover-class="none">
				<image class="photoSize" src="/static/settings.png" mode="aspectFill"></image>
			</navigator>
		</header>
		<!-- 未登录状态 -->
		<header class="header Row" @click="login" v-else>
			<view class="icon">
				<image style="width: 120%;height: 120%;" src="/static/touto.png" mode="aspectFill"></image>
			</view>
			<view class="nickname Row" style="width: 74%;">
				<view class="name">点击登录</view>
			</view>
		</header>

		<main class="wallet Column">
			<view class="wallet_left Column">
				<view class="qianBao iconfont">&#xe61c;</view>
				<view class="balance Row" @click="toggleSwitch">
					<view class="Row balance_head">
						<view class="balance">账户余额</view>
						<view class="iconfont chakan" v-if="look">&#xe642;</view>
						<view class="iconfont jinzhi" v-else>&#xe608;</view>
					</view>

					<view style="align-items: stretch;" class="recordOfContract Row"
						@click="redirect('/pages/mine/withdraw/Signed/recordOfContract/recordOfContract')">
						提现记录 <u-icon name="arrow-right" color="#ffffffdb" size="14"></u-icon></view>
				</view>

				<view class="money">
					<view v-if="look"><text style="font-size: 22px;margin-right: 4rpx;">￥</text>{{money}}
					</view>
					<view v-else>***</view>
				</view>
				<view class="Row recordOfContract pending">
					<view class="">待结算</view>
					<view class="">{{ unreceived_amount }}</view>
				</view>
				<view class="Row recordOfContract pending">
					<view class="">提现总金额</view>
					<view class="">{{total_money}}</view>
				</view>
			</view>
			<view class="wallet_right" @click="redirect('/pages/mine/withdraw/Signed/Signed')">提 现</view>

			<view class="reminder" v-show="reminderCont">{{reminderCont}}</view>
		</main>

		<mineMenu style="z-index: 9;" :requireLogin="true" />

		<u-popup :round="8" customStyle="width:80%;" :show="serviceShow" mode="center" @close="codeClose" @open="open">
			<view class="codeBox Column">
				<view class="close" @click="codeClose"><u-icon name="close" color="#fff" size="14"></u-icon></view>
				<!-- <view class="codeBox_tit">{{wxPay.qrcode_tips}}</view> -->
				<view class="codeBox_code">
					<image class="photoSize" :src="serviceList.customer_service" mode="aspectFill" />
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		postMenu,
		getMenu
	} from '@/utils/api.js';
	import mineMenu from "@/components/mineMenu/mineMenu.vue";

	export default {
		components: {
			mineMenu,
		},
		data() {
			return {
				height: uni.getSystemInfoSync().statusBarHeight,
				userInfo: '',
				token: '',
				money: '',
				total_money: '',
				unreceived_amount: '',
				group_name: "",

				serviceShow: false,
				serviceList: [],


				look: false,
				title: '确认退出吗？',
				reminderCont: "",
			}
		},
		onLoad() {},
		onShow() {
			this.token = uni.getStorageSync('token');
			this.userInfo = uni.getStorageSync('userInfo');
			if (this.token) {
				this.getUserInfo();
			}
		},
		methods: {
			codeClose() {
				this.serviceShow = false;
			},

			getUserInfo() {
				let that = this;
				uni.$u.http.post('/user/getUserInfo').then(res => {
					that.money = res.data.userinfo.money;
					that.unreceived_amount = res.data.withdraw.unreceived_amount;
					that.total_money = res.data.withdraw.money;
					that.group_name = res.data.userinfo.group.name;
				}).catch(err => {
					console.log(err)
				})
			},

			toggleSwitch() {
				let that = this;
				if (!that.token) {
					this.look = false;
					uni.$u.toast('请登录后操作');
					return false;
				}
				this.look = !this.look
			},
			open() {
				console.log(1)
				this.serviceShow = true;
			},

			redirect(Url) {
				if (!this.token) {
					return uni.$u.toast('请登录后操作');;
				}
				uni.navigateTo({
					url: Url
				})
			},

			login() {
				uni.navigateTo({
					url: '/pages/logIn/weChat_login/weChat_login'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.reminder {
		width: 100%;
		color: #ffffffdb;
		font-size: 15px;
		text-align: center;
		margin-top: 12px;
	}

	.mineBox {
		background-color: #f8f8f8;
		padding: 0 12px 20px;
		overflow: hidden;

		.nickname {
			justify-content: flex-start;
			color: #fff;
			font-size: 40rpx;
			font-weight: 550;

		}

		.bgImg {
			width: 100%;
			height: 280px;
			background: linear-gradient(to bottom, #ECEDEF, #ECEDEF);
			z-index: 0;
			position: fixed;
			top: -84px;
			left: 0;
		}

		.header {
			justify-content: space-between;
			// justify-content: space-between;
			padding: 27px 12px 27px;
			z-index: 1;

			.settings {
				width: 28px;
				height: 26px;
			}

			.nickname {
				justify-content: space-between;
				width: 62%;

				.editUserInfo {
					font-size: 14px;
					font-weight: 500;
					padding-top: 6px;
				}

				.name {
					font-size: 48rpx;
					font-family: "Times New Roman", Times, serif;
				}

				.levelImg {
					z-index: 1;
					align-items: center;
					width: 70px;
					height: 26px;
					margin-left: 20rpx;

					.imgs {
						width: 42px;
						height: 18px;
					}

					.number {
						z-index: 2;
						color: #fff;
						font-size: 14px;
						/* width: 80px; */
						white-space: nowrap;
						text-align: center;
						border-radius: 12px;
						border: 1px solid #fff;
						padding: 2px 12px;
					}
				}
			}

			.icon {
				width: 120rpx;
				height: 120rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 4px;
				background-color: #fff;
				box-shadow: 2px 3px 10px #0c56c5;
				overflow: hidden;
			}

			.header_left {
				width: 80%;

				.headerLeft {
					justify-content: center;
					align-items: center;
					margin: 0 20rpx;

					.expireDate {
						width: 100%;
						justify-content: flex-start;
						font-size: 28rpx;
						background: linear-gradient(to right, #FEDD9C, #ffbb31);
						background-clip: text;
						color: transparent;
						margin-top: 16rpx;
					}
				}
			}

			.bianJi {
				color: #fff;
				font-size: 46rpx;
				height: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}



		.wallet {
			z-index: 1;
			flex: 1;
			align-items: center;
			justify-content: space-around;
			border-radius: 16rpx;
			background-color: #fcfcfc;
			background-image: linear-gradient(90deg, #007aff 50%, #569be7 100%);
			box-shadow: 2px 2px 10px #b1c8ff;
			padding: 12px 20px;
			margin: 0 0 16px;
			position: relative;

			.recordOfContract {
				color: #ffffffdb;
				font-size: 28rpx;
			}

			.pending {
				justify-content: space-between;
				width: 100%;
			}

			&_left {
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 110px;
				color: #fff;
				padding-bottom: 8px;
				position: relative;

				.balance {
					justify-content: space-between;
					width: 100%;
					z-index: 2;
					font-size: 16px;

					.chakan {
						font-size: 18px;
						margin-left: 10rpx;
					}

					.jinzhi {
						font-size: 20rpx;
						margin-left: 12rpx;
					}
				}

				.money {
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 30px;
				}

				.qianBao {
					z-index: 1;
					font-size: 100px;
					opacity: 0.1;
					transform: rotateZ(0deg);
					position: absolute;
					left: 240px;
					top: 83px;
				}
			}

			&_right {
				width: 100%;
				color: #fff;
				text-align: center;
				font-size: 16px;
				border-radius: 6px;
				border: 2rpx solid #fff;
				background-color: #ffffff52;
				padding: 8px 0;
			}
		}

		.quit {
			color: #da0606;
			align-items: center;
			justify-content: center !important;
			padding: 10px 20rpx !important;
		}

		.codeBox {
			width: 90%;
			align-items: center;
			padding: 30rpx;
			padding-top: 44rpx;

			position: relative;

			&_tit {
				width: 72%;
				font-size: 28rpx;
				margin-top: 30rpx;
				margin-bottom: 10px;
			}

			&_code {
				width: 400rpx;
				height: 480rpx;
			}

			.close {
				border-radius: 50rpx;
				background-color: #cacaca;
				padding: 12rpx;

				position: absolute;
				top: 20rpx;
				right: 40rpx;
			}
		}
	}
</style>